﻿@page "/components/carousel"

<DocsPage>
    <DocsPageHeader Title="Carousel" SubTitle="It's used to display large numbers of visual content on a rotating timer" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Example">
                <Description>Default implementation.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-alert">
                <MudBlazor.Docs.Examples.CarouselExample />
            </SectionContent>
            <SectionSource Code="CarouselExample" GitHubFolderName="Carousel" />
        </DocsPageSection>
    </DocsPageContent>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="DataBinding">
                <Description>One-Way Binding to any IEnumerable list.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-alert">
                <MudBlazor.Docs.Examples.CarouselBindingExample />
            </SectionContent>
            <SectionSource Code="CarouselBindingExample" GitHubFolderName="Carousel" />
        </DocsPageSection>
    </DocsPageContent>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Custom Transition">
                <Description>You can use your own classes for items transition.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-alert">
                <MudBlazor.Docs.Examples.CarouselCustomTransitionExample />
            </SectionContent>
            <SectionSource Code="CarouselCustomTransitionExample" GitHubFolderName="Carousel" />
        </DocsPageSection>
    </DocsPageContent>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Transitions per page">
                <Description>Transitions are set per page.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-alert">
                <MudBlazor.Docs.Examples.CarouselPerPageTransitionExample />
            </SectionContent>
            <SectionSource Code="CarouselPerPageTransitionExample" GitHubFolderName="Carousel" />
        </DocsPageSection>
    </DocsPageContent>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Elements Templates">
                <Description>Custom arrows or delimiters templates:</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-alert">
                <MudBlazor.Docs.Examples.CarouselTemplatesExample />
            </SectionContent>
            <SectionSource Code="CarouselTemplatesExample" GitHubFolderName="Carousel" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
